<template>
  <view class="container">
    <!-- 空状态提示 -->
    <view v-if="rejectData.length === 0 && !loading" class="empty">
      <image src="/static/empty.png" class="empty-image" />
      <text class="empty-text">暂无驳回内容</text>
    </view>

    <!-- 驳回列表 -->
    <view v-else class="list-container">
      <view 
        v-for="(item, index) in rejectData" 
        :key="index" 
        class="card"
      >
        <!-- 驳回头 -->
        <view class="card-header">
          <view class="status-box">
            <uni-icons type="close" size="16" color="#f56c6c"></uni-icons>
            <text class="status-text">已驳回</text>
          </view>
          <text class="time">{{ formatTime(item.review_time) }}</text>
        </view>

        <!-- 内容主体 -->
        <view class="card-body">
          <text class="title">{{ item.title }}</text>
          <!-- 图片展示 -->
          <scroll-view 
            v-if="item.images && item.images.length" 
            scroll-x 
            class="image-scroll"
          >
            <view 
              v-for="(img, imgIndex) in item.images" 
              :key="imgIndex" 
              class="image-item"
            >
              <image 
                :src="img" 
                mode="aspectFill" 
                class="image"
                @click="handlePreview(item.images, imgIndex)"
              />
            </view>
          </scroll-view>
          <text class="content">{{ item.content }}</text>
        </view>

        <!-- 驳回原因 -->
        <view class="reject-reason">
          <text class="reason-label">驳回原因：</text>
          <text class="reason-text">{{ item.review_reason }}</text>
        </view>

        <!-- 投稿信息 -->
        <view class="footer">
          <text class="author">{{ item.author }}</text>
          <text class="mobile">{{ formatMobile(item.mobile) }}</text>
        </view>
      </view>

      <!-- 加载提示 -->
      <view class="loading-text">
        {{ loading ? '正在加载...' : hasMore ? '上拉加载更多' : '没有更多数据了' }}
      </view>
    </view>
  </view>
</template>

<script>
const db = uniCloud.database()
export default {
  data() {
    return {
      rejectData: [],
      loading: false,
      page: 1,
      pageSize: 10,
      hasMore: true
    }
  },
  created() {
    this.loadRejectList()
  },
  onReachBottom() {
    if (this.hasMore) {
      this.page += 1
      this.loadRejectList()
    }
  },
  methods: {
    async loadRejectList() {
      if (this.loading) return
      const userInfo = uni.getStorageSync('userInfo')
      const mobile = userInfo.mobile
      this.loading = true
      try {
        const res = await uniCloud.callFunction({
          name: 'getRejectList',
          data: {
            mobile,
          }
        })

        if (res.result.code === 200) {
          const newData = res.result.data
          this.rejectData = this.page === 1 ? newData : [...this.rejectData, ...newData]
          this.hasMore = newData.length >= this.pageSize
        }
      } catch (e) {
        uni.showToast({
          title: '数据加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    formatMobile(mobile) {
      return mobile?.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") || '未知'
    },

    formatTime(timestamp) {
      if (!timestamp) return '未知时间'
      const date = new Date(timestamp)
      const pad = num => num.toString().padStart(2, '0')
      return `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
    },

    handlePreview(images, index) {
      uni.previewImage({
        current: images[index],
        urls: images
      })
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding: 20rpx;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;
}

.empty-image {
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 40rpx;
}

.empty-text {
  color: #999;
  font-size: 28rpx;
}

.list-container {
  padding-bottom: 40rpx;
}

.card {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.status-box {
  display: flex;
  align-items: center;
}

.status-text {
  color: #f56c6c;
  font-size: 26rpx;
  margin-left: 10rpx;
}

.time {
  color: #999;
  font-size: 24rpx;
}

.card-body {
  margin-bottom: 24rpx;
}

.title {
  display: block;
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 16rpx;
}

.content {
  display: block;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20rpx;
}

.image-scroll {
  white-space: nowrap;
}

.image-item {
  display: inline-block;
  width: 200rpx;
  height: 200rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
}

.reject-reason {
  background: #fef0f0;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.reason-label {
  color: #f56c6c;
  font-size: 26rpx;
}

.reason-text {
  color: #f56c6c;
  font-size: 26rpx;
  margin-left: 10rpx;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  color: #999;
}

.loading-text {
  text-align: center;
  color: #999;
  font-size: 26rpx;
  padding: 30rpx 0;
}
</style>